<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换</title>
</head>
<body>
    <div id="mask">
        <input type="button" value="<" @click="pre" v-show="index!=0">
        <img :src="imgArr[index]">
        <input type="button" value=">" @click="next" v-show="index<imgArr.length-1">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let mask = new Vue({
            el:"#mask",
            data:{
                imgArr:[
                    "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E9%99%88%E6%84%8F%E6%B6%B5&hs=2&pn=12&spn=0&di=30140&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2230891877%2C1201679855&os=94033640%2C4196810216&simid=22958160%2C718771481&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=star&bdtype=0&oriquery=%E9%99%88%E6%84%8F%E6%B6%B5&objurl=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F18%2F20150518212154_4Rw5v.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3Dl00ldadmd&gsm=7&islist=&querylist=",
                    "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E9%99%88%E6%84%8F%E6%B6%B5&hs=2&pn=0&spn=0&di=118360&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1690803843%2C4004274500&os=1715973648%2C322151922&simid=4281505670%2C800108916&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=star&bdtype=0&oriquery=%E9%99%88%E6%84%8F%E6%B6%B5&objurl=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw700h467%2F20180129%2F14cd-fyqzcxi0300504.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fh_z%26e3Bftgw_z%26e3Bv54_z%26e3BvgAzdH3Fw6ptvsj_cccnmbc88n_r89kambd0laa8aan1br_z%26e3Bip4s&gsm=1&islist=&querylist=",
                    "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E9%99%88%E6%84%8F%E6%B6%B5&hs=2&pn=2&spn=0&di=6710&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2672257015%2C2686519696&os=715780874%2C478390669&simid=3327672441%2C299678671&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=star&bdtype=0&oriquery=%E9%99%88%E6%84%8F%E6%B6%B5&objurl=http%3A%2F%2Fztd00.photos.bdimg.com%2Fztd%2Fw%3D700%3Bq%3D50%2Fsign%3D878f2d02c6fc1e17fdbf8e317aab873e%2F7dd98d1001e93901e519172a72ec54e736d1968f.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fiw5hwg_z%26e3Bkwt17_z%26e3Bv54AzdH3Famvbbcmnuclwuuuvvud8cmnk1bmvkdacud&gsm=1&islist=&querylist=",
                    "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E9%99%88%E6%84%8F%E6%B6%B5&hs=2&pn=4&spn=0&di=76560&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=218597585%2C2765643353&os=116962406%2C640458053&simid=3449495298%2C354162225&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=star&bdtype=0&oriquery=%E9%99%88%E6%84%8F%E6%B6%B5&objurl=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F01%2F20150901162421_2jvxW.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3D999lcc9cc&gsm=1&islist=&querylist=",
                    "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E9%99%88%E6%84%8F%E6%B6%B5&hs=2&pn=5&spn=0&di=59840&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2236873753%2C2991849175&os=1341787171%2C2880416691&simid=4114425406%2C774901953&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=star&bdtype=0&oriquery=%E9%99%88%E6%84%8F%E6%B6%B5&objurl=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201601%2F31%2F20160131133924_R5Wix.thumb.700_0.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3D00d8nlcl0&gsm=1&islist=&querylist="
                ],
                index:1
            },
            methods:{
                pre:function () {
                    this.index ++;
                },
                next:function () {
                    this.index --;
                }
            }
        })
    </script>
</body>
</html>